//breakpoint
$screen-sm-min: 480px;
$screen-xs-max: ($screen-sm-min - 1);
$screen-md-min: 768px;
$screen-sm-max: ($screen-md-min - 1);
$screen-lg-min: 992px;
$screen-md-max: ($screen-lg-min - 1);
$screen-xl-min: 1200px;
$screen-lg-max: ($screen-xl-min - 1);

@mixin breakpoint($point) {
  @if $point == xl {
    @media (min-width: $screen-xl-min) {
      @content;
    }
  } @else if $point == lg {
    @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
      @content;
    }
  } @else if $point == md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @content;
    }
  } @else if $point == sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @content;
    }
  } @else if $point == xs {
    @media (max-width: $screen-xs-max) {
      @content;
    }
  }
}

/// @type cubic-bezier

$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);

$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);

$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);

///*
// * Background Repeat + Position
// */

@mixin bg-option($repeat: no-repeat, $position: center) {
  background-repeat: $repeat;
  background-position: $position;
}

///*
// * CSS Animations based on animate.css
// */

@mixin animated($name:fadeIn, $duration: 500ms, $cubic-bezier: $ease-in-out-quad, $delay: 0, $iteration: 1, $direction: normal) {
  animation-name: $name;
  animation-duration: $duration;
  animation-timing-function: $cubic-bezier;
  animation-delay: $delay;
  animation-iteration-count: $iteration;
  animation-direction: $direction;
  animation-fill-mode: both;
}

%transition {
  @include animated();
}

@mixin transition($prop:all,$time:0.5s,$cubic-bezier:$ease-in-out-quad,$delay:0) {
  transition-property: $prop;
  transition-duration: $time;
  transition-timing-function: $cubic-bezier;
  transition-delay: $delay;
}

%transition {
  @include transition();
}

@mixin scale-rotate($scale:2, $rotate:5deg) {
  transform: (scale($scale) rotate($rotate));
}

@mixin size($value) {
  $width: nth($value, 1);
  $height: $width;

  @if length($value) > 1 {
    $height: nth($value, 2);
  }

  @if is-size($height) {
    height: $height;
  } @else {
    @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
  }

  @if is-size($width) {
    width: $width;
  } @else {
    @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
  }

}

@mixin ellipsis($width: 100%) {
  display: inline-block;
  max-width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

@mixin word-wrap($wrap: break-word) {
  overflow-wrap: $wrap;
  word-wrap: $wrap;

  @if $wrap == break-word {
    word-break: break-all;
  } @else {
    word-break: $wrap;
  }
}

@mixin triangle($size, $color, $direction) {
  $width: nth($size, 1);
  $height: nth($size, length($size));
  $foreground-color: nth($color, 1);
  $background-color: if(length($color) == 2, nth($color, 2), transparent);
  height: 0;
  width: 0;

  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    $width: $width / 2;
    $height: if(length($size) > 1, $height, $height/2);

    @if $direction == up {
      border-bottom: $height solid $foreground-color;
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
    } @else if $direction == right {
      border-bottom: $width solid $background-color;
      border-left: $height solid $foreground-color;
      border-top: $width solid $background-color;
    } @else if $direction == down {
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
      border-top: $height solid $foreground-color;
    } @else if $direction == left {
      border-bottom: $width solid $background-color;
      border-right: $height solid $foreground-color;
      border-top: $width solid $background-color;
    }
  } @else if ($direction == up-right) or ($direction == up-left) {
    border-top: $height solid $foreground-color;

    @if $direction == up-right {
      border-left: $width solid $background-color;
    } @else if $direction == up-left {
      border-right: $width solid $background-color;
    }
  } @else if ($direction == down-right) or ($direction == down-left) {
    border-bottom: $height solid $foreground-color;

    @if $direction == down-right {
      border-left: $width solid $background-color;
    } @else if $direction == down-left {
      border-right: $width solid $background-color;
    }
  } @else if ($direction == inset-up) {
    border-color: $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $height $width;
  } @else if ($direction == inset-down) {
    border-color: $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $height $width;
  } @else if ($direction == inset-right) {
    border-color: $background-color $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $width $height;
  } @else if ($direction == inset-left) {
    border-color: $background-color $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $width $height;
  }
}

@mixin clearfix {
  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

@mixin bg-cover($image) {
  background-image: url($image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus,
  &.focus,
  &:active,
  .open > .dropdown-toggle {
    color: $color;
    background-color: $background;
    border-color: transparent;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active {
      background-color: $background;
      border-color: $border;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

@function black($opacity) {
  @return rgba(0, 0, 0, $opacity)
}

@function white($opacity) {
  @return rgba(255, 255, 255, $opacity)
}